﻿<AutoComplete OnInput="OnInput">
    <ChildContent>
        <AutoCompleteSearch Placeholder="input here" @bind-Value="@value" />
    </ChildContent>
    <AutoCompleteOptions>
        @foreach (var option in options)
        {
            <AutoCompleteOption Style="display: flex;" Value="@option.category">
                Found @option.value on
                <a style=" flex: auto; text-overflow: ellipsis; overflow: hidden;"
                   href="https://s.taobao.com/search?q=@(option.value)"
                   target="_blank"
                   rel="noopener noreferrer">
                    @option.category
                </a>
                <span style="flex: none;">@option.count results</span>
            </AutoCompleteOption>
        }
    </AutoCompleteOptions>
</AutoComplete>

@code{
    private string value;

    List<UncertainCategoryOption> options = new List<UncertainCategoryOption>();


    void OnInput(ChangeEventArgs e)
    {
        var v = e.Value.ToString();

        var r = new Random();
        var i = 0;
        this.options = new int[7].Select(x => new UncertainCategoryOption()
        {
            value = v,
            category = $"{v}{i++}",
            count = r.Next(100, 200),
        }).ToList();
    }

    public class UncertainCategoryOption
    {
        public string value { get; set; }

        public string category { get; set; }
        public int count { get; set; }
    }
}